<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#btn{
				margin-left: 410px;
				margin-top: 50px;
			}
		</style>
		<link rel="stylesheet" type="text/css" href="css/tabdemo.css" />
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<button id="btn"><a href="practice10.html">点击到游戏练习页面</a></button>
		<div class="tabox">
			<div class="hd">
				<ul>
					<li class="on">疯狂抢购</li>
					<li class=" ">猜您喜欢</li>
					<li class=" ">热卖商品</li>
					<li class=" ">热评商品</li>
					<li class=" ">新品上架</li>
				</ul>
			</div>
			<div class="bd">
				<ul class="lh">
					<img src="img/p1.jpg">
				</ul>
				<ul class="lh" style="display: none;">
					<img src="img/p2.jpg">
				</ul>
				<ul class="lh" style="display: none;">
					<img src="img/p3.jpg">
				</ul>
				<ul class="lh" style="display: none;">
					<img src="img/p4.jpg">
				</ul>
				<ul class="lh" style="display: none;">
					<img src="img/p5.jpg">
				</ul>
			</div>
		</div>
		
	</body>
</html>
<script>
	//179000516 王德令
	$(function() {
		$("li").click(function() {
			$(this).addClass("on").siblings().removeClass("on");
			$(".lh").eq($(this).index()).show().siblings().hide();
		});
	});
</script>
